<!-- eslint-disable -->
<template>
    <div style="background:#f3f3f3; padding-bottom:10px;" :style="{minHeight : offsetheight + 'px'}">
        <van-row>
            <van-col span="24">
                <img src="@/assets/images/showinfo/bg.png" style="width:100%">
            </van-col>
        </van-row>
        <template v-if="userInfo == {}">
            <van-row>
                <van-col span="24" style="padding:0 20px; text-align:center;margin-top:-90px;">
                    <img :src="require('@/assets/images/showinfo/t1x.png')" class="imgStyle">
                </van-col>
            </van-row>
        </template>

        <template v-else>
            <van-row>
                <van-col span="24" style="padding:0 20px; text-align:center;margin-top:-90px;position: relative">
                    <img :src="require('@/assets/images/showinfo/11' + userInfo.type + '.png')" class="imgStyle"
                         :style="{borderColor:getColor}">
                    <div class="main-tip">
                        <div :style="{color:getColor}">验证信息正确</div>
                    </div>
                </van-col>
            </van-row>

            <div class="user-info" style="padding: 0 20px">
                <div class="table-info" :style="{borderColor:getColor}">
                    <van-row style="border-bottom:1px solid;text-align: center" class="table-info-row2"
                             :style="{borderColor:getColor}">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            <div>姓名</div>
                        </van-col>
                        <van-col span="6" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{userInfo.name}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            性别
                        </van-col>
                        <van-col span="3" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{userInfo.sex}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            年龄
                        </van-col>
                        <van-col span="3" class="table-info-row2-col value">
                            {{userInfo.age}}
                        </van-col>
                    </van-row>
                    <van-row class="table-info-row2" type="flex" align="center">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            地址
                        </van-col>
                        <van-col span="20" class="table-info-row2-col value" style="padding-left:5px">
                            {{userInfo.loc_address}}
                        </van-col>
                    </van-row>
                </div>
                <div class="table-info" :style="{borderColor:getColor}"
                     v-for="(item,index) in userInfo.personList" :key="index">
                    <van-row style="text-align: center" class="table-info-row2"
                             :style="{borderColor:getColor}">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            <div>姓名</div>
                        </van-col>
                        <van-col span="8" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{item.name}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            关系
                        </van-col>
                        <van-col span="8" class="table-info-row2-col value">
                            {{item.relation}}
                        </van-col>
                    </van-row>
                </div>
                <div class="table-info" :style="{borderColor:getColor}"
                     v-for="(item,index) in userInfo.childrenList" :key="index">
                    <van-row style="text-align: center" class="table-info-row2"
                             :style="{borderColor:getColor}">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            <div>姓名</div>
                        </van-col>
                        <van-col span="8" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{item.name}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            关系
                        </van-col>
                        <van-col span="8" class="table-info-row2-col value">
                            {{item.relation}}
                        </van-col>
                    </van-row>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import { getAgeByIdCard } from '@/libs/tools'
import distData from '@/libs/dist.js'

export default {
  name: 'QrcodeShowInfo',
  data () {
    return {
      userInfo: {
        type: 1
      },
      offsetheight: document.documentElement.clientHeight - 10,
      qrColor: distData.qrColor,
      loading: true,
      // 经度
      lng: '123.410782',
      // 纬度
      lat: '41.789928'
    }
  },

  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  components: {},

  computed: {
    getColor () {
      return this.qrColor[this.userInfo.type]
    }
  },

  methods: {},

  watch: {
    formData (val) {
      this.userInfo = val
      this.userInfo['age'] = getAgeByIdCard(this.userInfo.card_no)
      console.log('组件内部信息', this.userInfo)
    }
  },
  mounted () {
    this.userInfo = this.formData
    this.userInfo['age'] = getAgeByIdCard(this.userInfo.card_no)
    console.log('--本地信息-', this.userInfo)
  }

}
</script>

<style scoped lang="less">
    @borderColor: #00A2E6;
    .type1 {
        border: 1px solid #0dbb22;
    }

    .type2 {
        border: 1px solid #ffff00;
    }

    .type3 {
        border: 1px solid #e9611d;
    }

    .type4 {
        border: 1px solid #e30920;
    }

    .c1 {
        color: #0dbb22;
    }

    .c2 {
        color: #ffff00;
    }

    .c3 {
        color: #e9611d;
    }

    .c4 {
        color: #e30920;
    }

    .value {
        color: #787878;
    }

    .main-tip {
        position: absolute;
        top: 70%;
        left: 2%;
        right: 2%;
        text-align: center;
        font-size: 26px;
        font-weight: 700;
        color: @borderColor;
    }

    .table-info {
        padding: 0px 4px 0 4px;
        border: 1px solid;
        margin-bottom: 10px;

        .table-info-row {
            display: flex;
            align-items: center;
        }

        .table-info-row2 {
            height: 45px;

            .table-right-border {
                border-right: 1px solid;
            }

            .table-left-border {
                margin-left: -1px;
                border-left: 1px solid #DDDDDD;
                padding: 5px 0 5px 0;
            }

            .table-right-border-end {
                padding: 5px 0 5px 0;
            }

            .table-info-row2-col {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .table-col {
            display: flex;
            align-items: center;
            padding: 5px 0 5px 0;

            .address-width {
                width: 50px;
            }
        }
    }

    .user-info {
        padding: 5px 10px 10px 10px;

        .name {
            color: #363636;
            font-weight: bold;
        }

        .address {
            font-size: 14px;
        }
    }

    .imgStyle {
        width: 100%;
        border: 1px solid @borderColor;
    }
</style>
